import React from 'react'
// ===================================================================== 
const { $Lazy } = window
// ===================================================================== Lazy
const Title 	= $Lazy.load(()=>import('#tp/title/title-small'))
const FormItem 	= $Lazy.load(()=>import('#cpt/form/submit-item'))
// ===================================================================== data
const fees = 120
// ===================================================================== component
const Index = ({ disabled, form }) => {
	// const [ value, setValue ] = React.useState() // { fees, item_num:1, total_price:'80.00'}
	
	React.useEffect(()=>{
		// form.current.refs.ref.setValue({ fees, item_num:1, total_price:'80.00'})
	},[form])
	
	const onChanged = React.useCallback( ({value}) =>{
		let rs = { item_num:0, total_price: '0.00' }
		if(value >= 0){
			const v = value * fees
			rs = { item_num:value, total_price: v.toFixed(2) }
		}
		form.current.refs.ref.setValue(rs)
	},[ form ])

	return (
		<div>
			<Title title='收费' />
			<div className='fx charge-readonly'>
				<FormItem wrapClassName='ex' p='' name='fees' readOnly />
				<div className='fxm ex mlr10'>
					<div className='f12 mr5 nowrap'>项数: </div>
					<FormItem wrapClassName='ex' p='' name='item_num' disabled={disabled} mode='number' onChanged={onChanged} />
				</div>
				<div className='fxm ex'>
					<div className='f12 mr5 nowrap'>总价: </div>
					<FormItem wrapClassName='ex' p='' name='total_price' readOnly />
				</div>
			</div>
		</div>
	)
}

export default Index